<template>
  <div class="showData">
    <el-form label-position="right" label-width="90px" :model="showData">
      <el-form-item v-show="showData.keywords != ''" label="关键词：">
        <span>{{ showData.keywords }}</span>
      </el-form-item>
      <el-form-item v-show="showData.territory1Node != ''" label="内容地域：">
        <span>{{ showData.territory1Node }}</span>
      </el-form-item>
      <el-form-item v-show="showData.territory2Node != ''" label="ICP地域：">
        <span>{{ showData.territory2Node }}</span>
      </el-form-item>
      <el-form-item v-show="showData.territory3Node != ''" label="泛主题地域：">
        <span>{{ showData.territory3Node }}</span>
      </el-form-item>
      <el-form-item v-show="showData.territory4Node != ''" label="确主题地域：">
        <span>{{ showData.territory4Node }}</span>
      </el-form-item>
      <el-form-item v-show="showData.moduleNode != ''" label="模块：">
        <span>{{ showData.moduleNode }}</span>
      </el-form-item>
      <el-form-item v-show="showData.companyNode != ''" label="公司：">
        <span>{{ showData.companyNode }}</span>
      </el-form-item>
      <el-form-item v-show="showData.productionNode != ''" label="产品：">
        <span>{{ showData.productionNode }}</span>
      </el-form-item>
      <el-form-item v-show="showData.peopleNode != ''" label="人物：">
        <span>{{ showData.peopleNode }}</span>
      </el-form-item>
      <el-form-item v-show="showData.siteInforNode != ''" label="站点信息：">
        <span>{{ showData.siteInforNode }}</span>
      </el-form-item>
      <el-form-item v-show="showData.sepcialSiteNode != ''" label="特殊站点：">
        <span>{{ showData.sepcialSiteNode }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'showData',
  data() {
    return {
      showData: {
        keywords: '',
        territory1Node: '',
        territory2Node: '',
        territory3Node: '',
        territory4Node: '',
        moduleNode: '', // 模块
        companyNode: '', // 公司
        productionNode: '', // 产品
        peopleNode: '', // 人物,
        siteInforNode: '',
        sepcialSiteNode: ''
      }
    }
  },
  methods: {},
  computed: {
    ...mapState('charts', ['chartsCondition'])
  },
  watch: {
    'chartsCondition.keywords'(val) {
      let array = []
      val.forEach(element => {
        element = element.split(':')
        array.push(element[1] + ' ' + element[2])
      })
      this.showData.keywords = array.join(',')
    },
    'chartsCondition.keywords1'(val) {
      if (val) {
        val = val.split(':')
        this.showData.keywords = this.showData.keywords
          ? this.showData.keywords + ',' + val[1] + ' ' + val[2]
          : val[1] + ' ' + val[2]
      }
    },
    'chartsCondition.territory1Node'(val) {
      this.showData.territory1Node = val.join('，')
    },
    'chartsCondition.territory2Node'(val) {
      this.showData.territory2Node = val.join('，')
    },
    'chartsCondition.territory3Node'(val) {
      this.showData.territory3Node = val.join('，')
    },
    'chartsCondition.territory4Node'(val) {
      this.showData.territory4Node = val.join('，')
    },
    'chartsCondition.moduleNode'(val) {
      this.showData.moduleNode = val.join('，')
    },
    'chartsCondition.companyNode'(val) {
      this.showData.companyNode = val.join('，')
    },
    'chartsCondition.productionNode'(val) {
      this.showData.productionNode = val.join('，')
    },
    'chartsCondition.peopleNode'(val) {
      this.showData.peopleNode = val.join('，')
    },
    'chartsCondition.siteInforNode'(val) {
      this.showData.siteInforNode = val.join('，')
    },
    'chartsCondition.sepcialSiteNode'(val) {
      this.showData.sepcialSiteNode = val.join('，')
    }
  }
}
</script>

<style scoped></style>
